<template>
  <div style="background:#eee">
    <div class="title">
      <span class="iconfont icon-left gobackIcon" @click="()=>{this.$router.go(-1)}"></span>
      <p>商品编辑</p>
    </div>
    <div>
      <van-cell-group class="groupSty">
        <van-field v-model="addInfo.productName" class="inputSty" label="商品名称" input-align="right" />
        <van-cell class="inputSty" title="商品主图" @click="()=>{clickIndex=1}">
          <van-uploader :max-count="1" preview-size="30" v-model="addInfo.mainImage" :after-read="afterRead" />
        </van-cell>
        <van-cell class="inputSty" title="商品轮播图" @click="()=>{clickIndex=2}">
          <van-uploader v-model="addInfo.slideshow" preview-size="30" :after-read="afterRead" />
        </van-cell>
        <van-cell class="inputSty" title="商品详情图" @click="()=>{clickIndex=3}">
          <van-uploader v-model="addInfo.productsDetail" preview-size="30" :max-count="1" :after-read="afterRead" />
        </van-cell>
        <van-field v-model="addInfo.intro" class="inputSty" rows="2" autosize label="商品简介" type="textarea" show-word-limit />
        <van-field class="inputSty" label="商品分类" input-align="right" disabled>
          <van-dropdown-menu slot="button">
            <van-dropdown-item v-model="addInfo.categoryId" :options="categoryIdItem" />
          </van-dropdown-menu>
        </van-field>
        <van-field v-model="addInfo.stock" type="number" class="inputSty" label="商品库存" input-align="right" />
        <van-field v-model="addInfo.carriage" type="number" class="inputSty" label="商品邮费" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
      </van-cell-group>
      <van-cell-group class="groupSty">
        <p>商品价格</p>
        <van-field v-model="addInfo.retailPrice" type="number" class="inputSty" label="零售价" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
        <van-field v-model="addInfo.originPrice" type="number" class="inputSty" label="原价" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
        <van-field v-model="addInfo.supplyPrice" type="number" class="inputSty" label="供货价" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
        <van-field v-model="addInfo.diamondPrice" type="number" class="inputSty" label="钻卡价格" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
        <van-field v-model="addInfo.goldPrice" type="number" class="inputSty" label="金卡价格" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
        <van-field v-model="addInfo.silverPrice" class="inputSty" label="银卡价格" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
        <van-field v-model="addInfo.groupPrice" class="inputSty" label="团购价格" input-align="right">
          <span slot="right-icon">元</span>
        </van-field>
      </van-cell-group>
      <van-cell-group class="groupSty">
        <p>数量</p>
        <van-field v-model="addInfo.diamondNum" type="number" class="inputSty" label="钻卡数量" input-align="right">
          <span slot="right-icon">张</span>
        </van-field>
        <van-field v-model="addInfo.goldNum" type="number" class="inputSty" label="金卡数量" input-align="right">
          <span slot="right-icon">张</span>
        </van-field>
        <van-field v-model="addInfo.silverNum" type="number" class="inputSty" label="钻卡数量" input-align="right">
          <span slot="right-icon">张</span>
        </van-field>
        <van-field v-model="addInfo.groupNum" type="number" class="inputSty" label="团购数量" input-align="right">
          <span slot="right-icon">张</span>
        </van-field>
      </van-cell-group>
      <van-cell-group class="groupSty">
        <p>分销比例</p>
        <van-field v-model="addInfo.distribution1" type="number" class="inputSty" label="一级分销比例" input-align="right" />
        <van-field v-model="addInfo.distribution2" type="number" class="inputSty" label="二级分销比例" input-align="right" />
      </van-cell-group>
      <van-cell-group class="groupSty">
        <van-cell class="inputSty" title="合法批文图片或文字：" @click="()=>{clickIndex=4}">
          <van-uploader v-model="addInfo.approval" :max-count="1" preview-size="30" :after-read="afterRead" />
        </van-cell>
      </van-cell-group>
      <van-cell-group class="groupSty">
        <van-collapse v-model="activeNames" class="assetPackage">
          <van-collapse-item class="title" title="商品资产包" name="1">
            <div>
              <p v-for="(item,index) in assetPackage" :key="index">
                <span>名称:{{item.name}}</span>
                <span>价格:{{item.amount}}</span>
                <span>数量:{{item.quantity}}</span>
                <i class="iconfont icon-guanbi1" @click="deletePackage(item)"></i>
              </p>
            </div>
            <van-button color="#0cbccb" :disabled="assetPackage.length>=5" block @click="addPackageDialog=true">添加</van-button>
          </van-collapse-item>
        </van-collapse>
      </van-cell-group>
      <van-cell-group class="groupSty">
        <van-field v-model="addInfo.guarantee" class="inputSty" rows="2" autosize label="服务保障" type="textarea" show-word-limit />
      </van-cell-group>
      <van-cell-group class="groupSty">
        <van-field v-model="addInfo.benefits" class="inputSty" rows="2" autosize label="文字保障" type="textarea" show-word-limit />
      </van-cell-group>
      <van-cell-group class="groupSty">
        <van-field v-model="addInfo.parameter" class="inputSty" rows="2" autosize label="详细参数" type="textarea" show-word-limit />
      </van-cell-group>
    </div>
    <div class="bottomBtn">
      <van-button block class="btn" @click="submitProductInfo()">确认提交</van-button>
    </div>
    <van-dialog @confirm="saveAddPackage" v-model="addPackageDialog" title="资产包信息" show-cancel-button>
      <van-field v-model="packageName" label="资产包名称" />
      <van-field v-model="packagePrice" label="价格" />
      <van-field v-model="packageQuantity" label="数量" />
    </van-dialog>
  </div>
</template>
<script>
export default {
  data: () => ({
    clickIndex: -1,
    addPackageDialog: false,
    packageName: null, //资产包名称
    packagePrice: null, //资产包价
    packageQuantity: null, //资产包数量
    categoryIdItem: [],
    activeNames: ["1"],
    assetPackage: [
    ],
    addInfo: {
      id: 0,
      carriage: 0, //邮费
      categoryId: 1, //商品分类ID
      intro: "", //商品简介
      mainImage: [], //商品主图
      productName: "", //商品名称
      productsDetail: [], //商品详情
      slideshow: [], //商品轮播图
      stock: 0, //商品库存
      retailPrice: 0, //零售价
      originPrice: 0, //原价
      supplyPrice: 0, //供货价
      diamondPrice: 0, //钻卡
      goldPrice: 0, //金卡
      silverPrice: 0, //银卡
      groupPrice: 0, //团购
      diamondNum: 0, //钻卡数量
      goldNum: 0, //金卡数量
      silverNum: 0, //银卡数量
      groupNum: 0, //团购数量
      approval: [], //合法批文图片或文字
      guarantee: "", //服务保障
      parameter: "", //详细参数
      benefits: "", //文字广告
      distribution1: 0, //一级分销比例
      distribution2: 0 //二级分销比例
    },
    productsDetailImageItem: [],
    slideshowImageItem: [],
    approvalImageItem: []
  }),
  created() {
    this.$axios.get(`ym/mall-product-category/list?parentId=0`).then(res => {
      console.log(res);
      if (res.code === 0) {
        res.data.forEach(msg => {
          this.categoryIdItem.push({
            text: msg.name,
            value: msg.id
          });
        });
      } else {
        console.log("获取商品分类错误");
      }
    });
  },
  methods: {
    afterRead(e) {
      console.log(e);
      console.log(this.clickIndex);
      switch (this.clickIndex) {
        case 1:
          console.log(1);
          this.imageUpload(this.addInfo.mainImage[0]);
          break;
        case 2:
          this.imageUpload(e);
          break;
        case 3:
          this.imageUpload(this.addInfo.productsDetail[0]);
          break;
        case 4:
          this.imageUpload(this.addInfo.approval[0]);
          break;
        default:
          return false;
      }
    },
    submitProductInfo() {
      console.log(this.addInfo);
      let sendData = Object.assign({}, this.addInfo);
      sendData.slideshow = this.copyArray(this.addInfo.slideshow);
      sendData.approval = this.addInfo.approval[0]?this.addInfo.approval[0]:null;
      sendData.mainImage = this.addInfo.mainImage[0]?this.addInfo.mainImage[0]:null
      sendData.productsDetail = this.addInfo.productsDetail[0]?this.addInfo.productsDetail[0]:null;
      sendData.mallProductAssetList = this.assetPackage
      console.log(sendData);
      console.log(this.addInfo);
      this.$axios.post(`ym/online-merchant-product/add`, sendData).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.$Toast("商品添加成功");
          Object.keys(this.addInfo).forEach(key => {
            if (
              key == "mainImage" ||
              key == "productsDetail" ||
              key == "slideshow" ||
              key == "approval"
            ) {
              this.addInfo[key] = [];
            } else if ( key == "intro" || key == "guarantee" || key == "parameter" || key == "benefits" || key == "productName" ) {
              this.addInfo[key] = "";
            } else {
              this.addInfo[key] = 0;
            }
          });
        } else {
          this.$Toast("商品添加失败");
        }
      });
    },
    imageUpload(e) {
      let param = new FormData();
      let config = {
        headers: {
          Authorization:
            "bearer" + JSON.parse(this.$store.state.userInfo).access_token,
          "Content-Type": "form-data"
        }
      };
      param.append("files", e.file);
      this.$axios
        .post(`ym/oss-attachment/upload-image`, param, config)
        .then(res => {
          console.log(res);
          if (res.data.code === 0) {
            console.log(this.clickIndex);
            switch (this.clickIndex) {
              case 1:
                this.addInfo.mainImage[0] = res.data.data[0].imgSrc;
                break;
              case 2:
                this.slideshowImageItem.push({
                  url: res.data.data[0].imgSrc
                });
                this.addInfo.slideshow = this.slideshowImageItem;
                break;
              case 3:
                this.addInfo.productsDetail[0] = res.data.data[0].imgSrc;
                break;
              case 4:
                this.addInfo.approval[0] = res.data.data[0].imgSrc;
                break;
              default:
                console.log("错误");
            }
          }
        });
    },
    copyArray(item) {
      let Arrays = [];
      item.forEach(res => {
        Arrays.push(res.url);
      });
      return Arrays;
    },
    deletePackage(item) {
      this.assetPackage.forEach((msg, index) => {
        if (item.name === msg.name) {
          this.assetPackage.splice(index, 1);
        }
      });
    },
    saveAddPackage() {
      this.assetPackage.push({
        amount: this.packagePrice,
        quantity: this.packageQuantity,
        name: this.packageName
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  margin: 0;
  padding: 10px 0;
  background: #0cbccb;
  color: #fff;
  .gobackIcon {
    border: 1px solid #0cbccb;
    position: absolute;
    left: 10px;
  }
  p {
    margin: 0;
    padding: 0;
    text-align: center;
  }
}
.groupSty {
  margin: 5px 0;
  p {
    margin: 0;
    color: #0cbccb;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
  }
  .assetPackage {
    .title {
      background: #fff;
      div {
        p {
          display: flex;
          align-items: center;
          margin: 0;
          padding: 15px 0;
          text-align: left;
          font-size: 14px;
          color: #0cbccb;
          span {
            display: inline-block;
            width: 20%;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:first-child {
              width: 50%;
            }
          }
          i {
            color: #ccc;
          }
        }
      }
    }
  }
}
.inputSty {
  font-size: 12px;
  color: #0cbccb;
  display: flex;
  align-items: center;
}
.bottomBtn {
  background: #fff;
  padding: 10px;
  .btn {
    color: #fff;
    background: #0cbccb;
    border-radius: 30px;
  }
}
</style>